body {
  background-color: #0c0c0c;
}
.switch {
  width: 200px;
  height: 200px;
  background-color: #1b1b1b;
  /* outline: 1px solid white; */
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  /* 元素水平垂直居中与定位的元素 */
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 1), inset 0 -4px 10px rgba(0, 0, 0, 1),
    inset 0 4px 4px rgba(255, 255, 255, 0.5), 0 0 0 4px #000, 0 0 0 10px #0c0c0c,
    0 0 0 11px #080808;
}

.switch{
    text-align: center;
    font-size: 100px;
    line-height: 200px;
    color: #000;

}
.s2{
    display: block;
    border-radius:50% ;
}
#s1{
    display: none;
}
#s1:checked+.s2{
    color: #00ffe7;
    text-shadow: 0 0 15px #00a1ff, 0 0 30px #00a1ff;
    box-shadow: 0 0 0 rgba(0,0,0,1), inset 0 -4px 10px rgba(0,0,0,1), inset 0 4px 4px rgba(255,255,255,0.1), 0 0 0 4px #000, 0 0 0 10px #0c0c0c, 0 0 0 11px #00a1ff;;
}












#sw1{
    display: none;
}

.btn input:checked+div.b1{
    background-color: turquoise;
}
.b1{
    width: 100px;
    height: 100px;
    background-color: rgb(248, 194, 194);
}
    
   